import './WijmoA03.scss'



import { GroupPanel } from '@grapecity/wijmo.react.grid.grouppanel';
import { FlexGridFilter } from '@grapecity/wijmo.react.grid.filter';

import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'
import { ImmutabilityProvider } from '@grapecity/wijmo.react.grid.immutable'
import { useRef, useState } from "react";
import { useMount } from "ahooks";


const WijmoA03 = () => {
    const GroupBox = useRef()
    const onGridInitialized = (s) => GroupBox.current.control.grid = s
    const onGridDataChanged = (s, e) => {
        console.log('全部数据', s)
        console.log('当前数据', e)
    }

    const [Data, setData] = useState()
    const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
    const products = ['Widget', 'Gadget', 'Doohickey'];
    function getData(count = 500) {
        const data = [];
        const dt = new Date();
        // add count items
        for (let i = 0; i < count; i++) {
            let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
                countryId = Math.floor(Math.random() * countries.length),
                productId = Math.floor(Math.random() * products.length)
            let item = {
                id: i,
                start: date,
                end: date,
                country: countries[countryId],
                product: products[productId],
                sales: Math.random() * 10000,
                downloads: Math.round(Math.random() * 10000),
                active: i % 4 === 0
            };
            Object.freeze(item)
            data.push(item)
        }
        setData(data)
    }

    useMount(() => {
        getData()
    })



    if (Data) {
        return (
            <div className="Page WijmoA03">
                <GroupPanel ref={GroupBox} placeholder="Drag columns here to create groups." />
                <FlexGrid allowAddNew allowDelete initialized={onGridInitialized}>
                    <ImmutabilityProvider itemsSource={Data} dataChanged={onGridDataChanged} />
                    <FlexGridFilter />
                    <FlexGridColumn binding="id" header="ID" width={80} isReadOnly={true} />
                    <FlexGridColumn binding="start" header="日期" format="d" />
                    <FlexGridColumn binding="end" header="时间" format="t" />
                    <FlexGridColumn binding="country" header="国家" />
                    <FlexGridColumn binding="product" header="省份" />
                    <FlexGridColumn binding="sales" header="数字" format="n2" />
                    <FlexGridColumn binding="downloads" header="下载" format="n0" />
                    <FlexGridColumn binding="active" header="状态" width={80} />
                </FlexGrid>
            </div>
        )
    }
};

export default WijmoA03;